# [React] Fragment


JSX ํŒŒ์ผ ๊ทœ์น™์ƒ return ์‹œ ํ•˜๋‚˜์˜ ํƒœ๊ทธ๋กœ ๋ฌถ์–ด์•ผํ•œ๋‹ค.
์ด๋Ÿฐ ์ƒํ™ฉ์— Fragment๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์‰ฝ๊ฒŒ ๊ทธ๋ฃนํ™”๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค.

์•„๋ž˜์™€ ๊ฐ™์ด Table ์ปดํฌ๋„ŒํŠธ์—์„œ Columns๋ฅผ ๋ถˆ๋ €๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด์ž

import { Component } from 'React'
import Columns from '../Components'

class Table extends Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

Columns ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” <td> ~~ </td>์™€ ๊ฐ™์€ element๋ฅผ ๋ฐ˜ํ™˜ํ•ด์•ผ ์œ ํšจํ•œ ํ…Œ์ด๋ธ” ์ƒ์„ฑ์ด ๊ฐ€๋Šฅํ•  ๊ฒƒ์ด๋‹ค.

import { Component } from 'React'

class Columns extends Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

์—ฌ๋Ÿฌ td ํƒœ๊ทธ๋ฅผ ์ž‘์„ฑํ•˜๊ธฐ ์œ„ํ•ด div ํƒœ๊ทธ๋กœ ๋ฌถ์—ˆ๋‹ค. (JSX ํŒŒ์ผ ๊ทœ์น™์ƒ return ์‹œ ํ•˜๋‚˜์˜ ํƒœ๊ทธ๋กœ ๋ฌถ์–ด์•ผํ•œ๋‹ค.)

์ด์ œ Table ์ปดํฌ๋„ŒํŠธ์—์„œ DOM ํŠธ๋ฆฌ๋ฅผ ๊ทธ๋ ธ์„ ๋•Œ ์–ด๋–ป๊ฒŒ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜ค๋Š”์ง€ ํ™•์ธํ•ด๋ณด์ž


<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

Columns ์ปดํฌ๋„ŒํŠธ์—์„œ div ํƒœ๊ทธ๋กœ ๋ฌถ์–ด์„œ Table ์ปดํฌ๋„ŒํŠธ๋กœ ๋ณด๋ƒˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค. ๋”ฐ๋ผ์„œ JSXํŒŒ์ผ์˜ return๋ฌธ์„ ๋ฌด์กฐ๊ฑด div ํƒœ๊ทธ๋กœ ๋ฌถ๋Š” ๊ฒƒ์ด ๋ฐ”๋žŒ์งํ•˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ๋‹ค.

์ด๋•Œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ฌธ๋ฒ•์ด ๋ฐ”๋กœ Fragment๋‹ค.

import { Component } from 'React'

class Columns extends Component {
  render() {
    return (
      <Fragment>
        <td>Hello</td>
        <td>World</td>
      </Fragment>
    );
  }
}

div ํƒœ๊ทธ ๋Œ€์‹ ์— Fragment๋กœ ๊ฐ์‹ธ์ฃผ๋ฉด ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋œ๋‹ค. Fragment๋Š” DOMํŠธ๋ฆฌ์— ์ถ”๊ฐ€๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ์ •์ƒ์ ์œผ๋กœ Table์„ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.


Frament๋กœ ๋ช…์‹œํ•˜์ง€ ์•Š๊ณ , ๋นˆ ํƒœ๊ทธ๋กœ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.

import { Component } from 'React'

class Columns extends Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

์ด ๋ฐ–์—๋„ ๋ถ€๋ชจ, ์ž์‹๊ณผ์˜ ๊ด€๊ณ„์—์„œ flex, grid๋กœ ์—ฐ๊ฒฐ๋œ element๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ์—๋Š” div๋กœ ์—ฐ๊ฒฐ ์‹œ ๋ ˆ์ด์•„์›ƒ์„ ์œ ์ง€ํ•˜๋Š”๋ฐ ์–ด๋ ค์›€์„ ๊ฒช์„ ์ˆ˜๋„ ์žˆ๋‹ค.

๋”ฐ๋ผ์„œ ์œ„์™€ ๊ฐ™์€ ๊ฐœ๋ฐœ์ด ํ•„์š”ํ•  ๋•Œ๋Š” Fragment๋ฅผ ์ ์ ˆํ•œ ์ƒํ™ฉ์— ์‚ฌ์šฉํ•˜๋ฉด ๋œ๋‹ค.



# [์ฐธ๊ณ  ์‚ฌํ•ญ]

์ตœ์ข… ์ˆ˜์ • : 12/17/2022, 7:23:59 AM